<template>
  <p style="color:rgba(121, 121, 121, 0.4)">其他管理/权限管理/角色管理</p>
  <el-card>

  <div id="u10785_text" class="text" >
    <p style="font-size: 20px;font-weight: bolder">角色管理</p>
  </div>


  <el-row>

    <el-col :span="12"><div class="grid-content ep-bg-purple" />
<!--      搜索-->
      <el-input placeholder="请输入角色名称" style="width: 300px">
        <template #append>
          <el-button :icon="Search"/>
        </template>
      </el-input>
    </el-col>

    <el-col :span="12"><div class="grid-content ep-bg-purple-light" />
<!--      添加按钮-->
  <el-button type="primary" @click="dialogTableVisible = true">+添加</el-button>
  <el-dialog v-model="dialogTableVisible" title="添加角色">
    <el-form :model="form">
      <el-form-item label="角色名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" placeholder="最多不超过50个字"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer" label-position="center">
         <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
    </el-col>
    </el-row>



<!--表格-->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="角色名称" width="180" />
    <el-table-column prop="authorized" label="授权人数" width="180" />
    <el-table-column prop="notes" label="备注" width="180" />
    <el-table-column prop="create" label="创建名称" width="180" />
    <el-table-column fixed="right" label="Operations" width="180">

      <template #default>
        <router-link to="/allocate">
          <p>分配资源</p>
        </router-link>

        <el-button @click="dialogModifyVisible = true">修改</el-button>
        <el-dialog v-model="dialogModifyVisible" title="修改角色">

          <el-form :model="form">
            <el-form-item label="角色名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" placeholder="最多不超过50个字"/>
            </el-form-item>



          </el-form>
          <template #footer>
      <span class="dialog-footer" label-position="center">
         <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
          </template>
        </el-dialog>
        <el-button text @click="centerDialogVisible=true">
          删除
        </el-button>

        <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
    <span>
     您确认要删除xxx角色吗?
    </span>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible=false">
          确认
        </el-button>
        <el-button @click="centerDialogVisible=false">取消</el-button>

      </span>
          </template>
        </el-dialog>
      </template>
    </el-table-column>

  </el-table>

  <el-row>
    <el-col :span="10">
      <P>共x条</P>
    </el-col>
    <el-col :span="14">
      <div style="margin: 20px 0px 20px 0">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20,40,60,80]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            :pager-count="pagerCount"
        />
      </div>
    </el-col>
  </el-row>
  </el-card>
</template>

<script setup>
import {reactive, ref} from "vue";

const input = ref('')


let dialogModifyVisible=ref(false)
let dialogTableVisible=ref(false)


const centerDialogVisible = ref(false)


const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },

]



const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    name: '超级管理员',
    authorized: '1',
    notes: '总后台管理员，可以操作所有菜单',
    create: '2022-12-2717:2:34',
    tag: 'Home',
  },
  {
    name: '快递员客服',
    authorized: '3',
    notes: '快递员端客服人员，可以操作快递员相关信息。',
    create: '2022-12-2717:2:34',
    tag: 'Office',
  },
  {
    name: '会员端客服',
    authorized: '5',
    notes: '会员端客服人员，可以操作会员相关信息。',
    create: '2022-12-2717:2:34',
    tag: 'Home',
  },
  {
    name: '智能柜终端客服',
    authorized: '2',
    notes: '终端客服人员，可以操作智能柜终端系统相关信息。',
    create: '2022-12-2717:2:34',
    tag: 'Office',
  },
]

const currentPage = ref(40);
const pageSize = ref(20);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const pagerCount = ref(6);
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>